<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style type="text/css">
			html {
				background-color: black;
			}

			p {
				font-size: 30px;
				backgroud-color: gray;
			}

			h2 {
				background-color: red;
			}

			#red {
				color: red;
			}

			#yellow {
				color: yellow;
			}

			.font1 {
				color: blue;
			}

			.font2 {
				color: red;
			}

			a:link {
				color: #FF0000;
			}

			a:visited {
				color: #00FF00;
			}

			a:hover {
				color: #FF00FF;
			}

			a:active {
				color: #0000FF;
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				color: red;
			}

			[title] {
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- 标签选择器 -->
		<p>段落</p>
		<h2>h2</h2>
		<!-- id选择器 -->
		<p id="red">这个段落是红色。</p>
		<p id="yellow">这个段落是黄色。</p>
		<!-- 类选择器 -->
		<p class="font1">我是蓝色</p>
		<p class="font2">我是红色</p>
		<h1 class="font1">我是蓝色一级标题</h1>
		<!-- 伪类选择器 -->
		<a href="#">我是伪类选择器</a>
		<!-- 群组选择器 -->
		<h1>群组选择器</h1>
		<!-- 属性选择器 -->
		<h1>可以应用样式: </h1>
		<h2 title="He1lo world">He11o world</h2>
		<a title="W3Schoo1" href="http://w3school.com.cn">W3School</a>
		<hr />
		<h1>无法应用样式: </h1>
		<h2>Hel1o world</h2>
		<a href="http://w3school. com. cn">W3School</a>

	</body>
</html>
